<template>
    <div class="login_container">
        <div class="login_box">
            <div class="logo_pic">
                <img src="../assets/logo.png">
            </div>
            <el-form ref="loginformref" :model="loginForm " :rules="loginrules" label-width="0px"  class="login_box_form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="用户名输入" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="密码输入"    prefix-icon="iconfont icon-3702mima" ></el-input>
                </el-form-item>
                <el-form-item  class="button_item">
                        <el-button @click="userlogin()" type="primary" round plain>登录</el-button>
                        <el-button @click= "resetValue()" type="danger" round plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginForm:{
                    username:'',
                    password:'',
                },
                loginrules:{
                username:[
                    {required:true,message:"没有填入用户名",trigger:'blur'},
                    {min:2,max:100,message:"用户名应该大于2",trigger:'blur'}
                ],
                password:[
                    {required:true,message:"没有填入密码",trigger:'blur'},

                ]

            }
            }
        },  
        methods:{
            // 清空重置
            resetValue(){
                this.$refs.loginformref.resetFields();
            },
            userlogin(){
                //validate返回的是一个promise对象
                this.$refs.loginformref.validate(async result=>{
                    if(!result){
                            this.$message({
                                showClose:true,
                                message:"提交不符合格式",
                                type:'error'
                            });;
                        return 
                    }else{
                        const {data:res}=await (this.$http.post("login",this.loginForm));
                        if(res.meta.status!==200){
                            this.$message({
                                showClose:true,
                                message:"用户名或密码不正确",
                                type:'error'
                            });
                        }else{
                            this.$message({
                                showClose:true,
                                message:"登录成功,"+this.loginForm.username,
                                type:'success'
                            });
                            window.sessionStorage.setItem("token",res.data.token);
                            this.$router.push('/home');
                        }
                    
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.login_container{
    background-color: 	#98FB98;
    height: 100%;
}
.login_box{
    position: absolute; 
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    width: 40%;
    height: 35%;
    border-radius: 5%;
    background-color: #F8F8FF;
}
.logo_pic{
    // background-color: orangered;
    height: 130px;
    width: 130px;
    border-radius:50% ;
    padding: 5px;
    box-shadow: 0 0 10px black;
    img {
        width: 100%;
        height:100%;
        border-radius:50% ;
        border-color: #eee;
        background-color: #D8BFD8;
    }
    position: absolute;
    left: 50%;
    // margin-left:-65px;
    // margin-top: -65px;
    transform: translate(-50%,-50%);
}
.login_box_form{
    box-sizing: border-box;
    // width: 100%;
    padding:20px 40px;
    width: 100%;
    position: absolute;
    bottom: 0;

}
.button_item{
    display: flex;
    justify-content: center;
}
</style>